<template>
  <div class="cart">
    <input type="checkbox" v-model="itemObj.checked" @change="$emit('change')">
    <img :src="itemObj.img" alt="">
    <section>
      <p class="title">{{itemObj.name}}</p>
      <div>
          <span style="color:red">￥{{itemObj.price}}</span>
          <p>
             <span @click="itemObj.num==1?1:itemObj.num--">-</span>
             <span>{{itemObj.num}}</span>
             <span @click="itemObj.num++">+</span>
          </p>
      </div>
    </section>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props:{
    itemObj: Object
  },
  setup() {},
};
</script>
<style lang="scss" scoped>
  .cart{
      display: flex;
      align-items: center;
      padding: 10px;
      background: #fff;
      font-size: 13px;
      margin-top: 10px;
      img{
        width: 80px;
        margin: 0 10px;
      }
      section{
          flex: 1;
          .title{
              color: #999;
          }
          div{
              display: inline-flex;
              justify-content: space-between;
              width: 100%;
          }
          p>span{
            background: #f2f3f5;
            padding: 5px 8px;
            margin-left: 5px;
          }
      }
  }
</style>